<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
    html,body {
      font-size: 1.2rem;
      background: #f2f2f2;
      color: #333333 !important
    }
    ul,ol{
      list-style: none;
      padding: 0px;
      margin: 0px;
    }
    [v-cloak] {
        display: none;
    }
    header,.aui-bar,.aui-bar-nav{
      font-size: 1.2rem;
      color: #333 !important;
      background:#fff;
      box-shadow: 0rem 0rem 0.8rem 0rem
  		rgba(126, 126, 126, 0.52);
      border-bottom: none;
      margin-top: 0 !important;
    }
    .aui-pull-left{
      font-size: 1.2rem;
    }
    .aui-pull-left .aui-iconfont{
      font-size: 1.2rem;

    }
    .aui-bar-nav .aui-title{
      right: 4rem;
      left: 0rem;
    }
    header, .aui-bar-nav{
      padding-top:0;
    }
    .aui-bar-nav .aui-pull-right.class_nav{
      top:1.3rem;
      right:1.3rem;
      padding:0;
      height:1.6rem;
      line-height: 1.6rem;
    }
    .aui-bar-nav .aui-pull-left.class_nav1{
      top:1.3rem;
      left:1.3rem;
      padding:0;
      height:1.7rem;
      line-height: 1.7rem;
    }
    .class_nav img{
      height:1.7rem;
    }
    .class_nav1 img{
      height:1.7rem;
    }
    .class_nav span{
      position: absolute;
      top: -0.5rem;
      right: -0.5rem;
      width: 1.2rem;
    	height: 1.2rem;
      line-height: 1.2rem;
    	background-color: #ed6a20;
      font-size:1rem;
      color:#fff;
      border-radius: 100%;
    }
    .class_nav_title{
      position: absolute;
      width:1.3rem;
      height:4rem;
      line-height: 4rem;
      top:2.5rem;
      right:0.75rem;
      font-size: 1.6rem;
    	letter-spacing: 0.03rem;
    	color: #333333;
    }
    .con1{
      padding-top:6.9rem;
      background:#fafafa;
    }
    .fl{
      float:left;
    }
    .fr{
      float:right;
    }
    .aui-toast-content {
        color: #fff;
    }
    /*shopDetail_sec1*/
    .shopDetail_sec1{
      padding:1.3rem;
      background:#fff;
    }
    .shopDetail_sec1_left_img{
      width:5.8rem;
      float:left;
    }
    .shopDetail_sec1_left_txt{
      height:5.8rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left:0.6rem;
    }
    .shopDetail_sec1_left_txt h5{
      font-size: 1.4rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #0c0c0c;
      line-height: 1;
    }
    .shopDetail_sec1_left_txt p{
      font-size: 1.1rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.02rem;
    	color: #999999;
      line-height: 1;
      margin-top:1rem;
    }
    .shopDetail_sec1_right{
      position: relative;
      overflow: hidden;
      border-radius: 0.4rem;
      margin-top: 0.3rem;
    }
    .shopDetail_sec1_right1{
      padding:0.8rem;
      background-image: linear-gradient(50deg,
    		#ed6a20 0%,
    		#f67b11 48%,
    		#ff8c01 100%),
    	linear-gradient(
    		#ffa7a7,
    		#ffa7a7);
    	background-blend-mode: normal,
    		normal;
        font-size: 1.4rem;
        line-height: 1;
        color: #fff;
    }
    .shopDetail_sec1_right1 i{
      font-size: 1.4rem;
      color: #fff;
      margin-right: 0.5rem;
    }
    .shopDetail_sec1_right2{
      padding:0.5rem;
      text-align: center;
      background-color: #f0f2f5;
      font-size: 1.1rem;
      line-height: 1;
    	color: #666666;
    }
    ul.shopDetail_sec1_list1{
      padding: 1.35rem 0 1rem;
      border-bottom: 1px solid #e0e0e0;
    }
    ul.shopDetail_sec1_list1 li{
      width: 50%;
      float: left;
      text-align: center;
      position: relative;
    }
    ul.shopDetail_sec1_list1 li h5{
      font-size: 1.5rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #595757;
      line-height: 1;
    }
    ul.shopDetail_sec1_list1 li::after{
      content: '';
      position: absolute;
      top:5%;
      right:0;
      width:1px;
      height:90%;
      background:#e0e0e0;
    }
    ul.shopDetail_sec1_list1 li:last-child::after{
      height:0;
    }
    ul.shopDetail_sec1_list1 li p{
      font-size: 1.2rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #595757;
      line-height: 1;
      margin-top: 1.25rem;
    }
    ul.shopDetail_sec1_list2 li{
      margin-top:1.35rem;
    }
    ul.shopDetail_sec1_list2 li span{
      display: inline-block;
      /*vertical-align: middle;*/
    }
    ul.shopDetail_sec1_list2 li span:first-child{
      font-size: 1.4rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #333333;
      line-height: 1;
    }
    ul.shopDetail_sec1_list2 li span:last-child{
      font-size: 1.3rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0rem;
    	color: #ed6a20;
      line-height: 1;
      margin-left:2.9rem;
    }
    /*shopDetail_sec1*/

    /*shopDetail_sec2*/
    .shopDetail_sec2{
      margin-top: 1rem;
      background: #fff;
      padding: 0 1.3rem;
    }
    .shopDetail_sec2 ul li{
      padding:1.5rem 0;
      border-bottom: 1px solid #e0e0e0;
      position: relative;
    }
    .shopDetail_sec2 ul li:last-child{
      border-bottom: none;
    }
    .shopDetail_sec2 ul li span{
      font-size: 1.4rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0.03rem;
    	color: #333333;
      line-height: 1;
    }
    .shopDetail_sec2 ul li span.fr{
    	color: #ed6a20;
    }
    .shopDetail_sec2 ul li img.ewm{
      position: absolute;
      width:1.5rem;
      top:1.5rem;
      right:1.35rem;
    }
    .shopDetail_sec2 ul li img.zzxx{
      position: absolute;
      width: 2.1rem;
      top: 1.2rem;
      right: 1.35rem;
    }
    .shopDetail_sec3 ul li span:last-child{
      margin-left:2.9rem;
      font-size: 1.3rem;
    	font-weight: normal;
    	font-stretch: normal;
    	letter-spacing: 0rem;
    	color: #666666;
      line-height: 1;
    }
    /*shopDetail_sec2*/

</style>
<body>
<div id="app" style="position:relative;" v-cloak>

  <header id="header_top" class="aui-bar aui-bar-nav " style="position:fixed;top:0;height:6.9rem;padding-top:2.5rem;">

    <div class="aui-title class_nav_title">店铺详情</div>
    <!-- <a class="aui-pull-right aui-btn class_nav">
        <img src="../../image/class/share_index_nav3.png" alt="">
        <span>5</span>
    </a> -->
    <a class="aui-pull-left aui-btn class_nav1" onclick="close_win()">
        <img src="../../image/back.png" alt="">
    </a>
  </header>
  <div class="aui-refresh-content">
    <div class="con1">

      <div class="shopDetail_sec1">
        <div class="shopDetail_sec1_list clearfix">
          <div class="shopDetail_sec1_left fl clearfix">
            <div class="shopDetail_sec1_left_img fl">
              <img :src=msg.store_logo alt="" width="100%">
            </div>
            <div class="shopDetail_sec1_left_txt fr">
              <h5>{{msg.store_name}}</h5>
              <p>{{msg.store_star}}分</p>
            </div>
          </div>
          <div class="shopDetail_sec1_right fr">
            <div class="shopDetail_sec1_right1"  @click="storeCollect('1')" v-if="msg.collection==0">
              <i class="aui-iconfont aui-icon-plus"></i>
              <!-- <span>关注</span> -->关注
            </div>
            <div class="shopDetail_sec1_right1" @click="storeCollect('2')"  v-if="msg.collection==1">
            取消关注
            </div>
            <div class="shopDetail_sec1_right2">{{msg.store_collection}}人</div>
          </div>
        </div>
        <ul class="shopDetail_sec1_list1 clearfix">
          <li>
            <h5>{{msg.store_goods_num_all}}</h5>
            <p>全部商品</p>
          </li>
          <li>
            <h5>{{msg.store_goods_num_new}}</h5>
            <p>上新</p>
          </li>
        </ul>
        <ul class="shopDetail_sec1_list2">
          <li>
            <span>商品评价</span>
            <span class="pingjia">{{msg.store_goods_star}}分</span>
          </li>
          <li>
            <span>服务态度</span>
            <span class="attitude">{{msg.store_service_star}}分</span>
          </li>
          <li>
            <span>物流速度</span>
            <span class="wuliu">{{msg.store_exp_star}}分</span>
          </li>
        </ul>
      </div>

      <div class="shopDetail_sec2">
        <ul>
          <li class="clearfix">
            <span class="fl">联系卖家</span>
            <span class="fr">{{msg.telephone}}</span>
          </li>
          <li class="clearfix">
            <span class="fl">店铺二维码</span>
            <!-- <span class="fr">15268803593</span> -->
            <img :src=msg.store_qrcode alt="" class="ewm">
          </li>
          <li class="clearfix">
            <span class="fl">证照信息</span>
            <img :src=msg.store_paperspic alt="" class="zzxx">
            <!-- <span class="fr">15268803593</span> -->
          </li>
        </ul>
      </div>

      <div class="shopDetail_sec2 shopDetail_sec3">
        <ul>
          <li>
            <span>店铺简介</span>
            <span>{{msg.store_desc}}</span>
          </li>
          <li>
            <span>所在地区</span>
            <span>{{msg.store_place}}</span>
          </li>
          <li>
            <span>开店时间</span>
            <span>{{msg.add_time}}</span>
          </li>
        </ul>
      </div>

    </div>
	</div>
</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>


<script type="text/javascript">
var app;
function doSearch(){
    var searchValue = document.getElementById("search-input").value;
    if(searchValue){
        api.toast({
            msg: searchValue,
            duration: 2000,
            location: 'bottom'
        });

    }
}
  apiready = function(){
    var toast = new auiToast({})
    app = new Vue({
        el: '#app',
        data: {
            msg:{}
        },
        created: function() {
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });

        },
        methods: {
          storeCollect:function(type){
            var _this = this
            var data={
              token:$api.getStorage('token'),
              store_id:api.pageParam.id,
              type:type
            }
            api.ajax({
                url:  window.hurl.store_collect,
                method: 'post',
                data: {
                    values:data
                }
            },function(ret, err){
                if (ret) {
                  if(ret.status == 1){
                    api.execScript({name: 'shop',script: 'window.location.reload();'});
                    _this.detailStore();
                    toast.success({
                      title:ret.info,
                      duration:1000
                    })
                  }else{
                    toast.fail({
                      title:ret.info,
                      duration:1000
                    })
                  }
                } else {
                    console.log( JSON.stringify( err ) );
                }
            });

          },
          //详细信息
          detailStore:function(){
            var _this = this
            api.ajax({
                url: window.hurl.store_info,
                method: 'post',
                data: {
                    values: {
                        token:$api.getStorage('token'),
                        store_id:api.pageParam.id
                    }

                }
            },function(ret, err){
                if (ret) {
                    console.log( JSON.stringify( ret ) );
                    if(ret.status==1){
                      _this.msg = ret
                    }else{
                        toast.fail({
                          title:ret.info,
                          duration:1000
                        })
                    }
                } else {
                    alert( JSON.stringify( err ) );
                }
            });
          }
        },
        mounted: function () {
          this.detailStore();
          api.hideProgress();
          tabNav();
          setRefresh();
          bannerSwiper();

        }
      })

  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }

  function tabNav() {
      var prevIndex = 1
      var tab1 = new auiTab({
          element: document.getElementById("tab1"),
          repeatClick: true
      }, function(ret) {
          if (ret.index == 1) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down');
          } else if (ret.index == 2) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down')
          } else if (ret.index == 3) {
              $('.shopClassify_nav .aui-tab-item').eq(3).removeClass('up, down')
          } else if (ret.index == 4) {
            if (prevIndex == ret.index) {
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('up')
                $('.shopClassify_nav .aui-tab-item').eq(3).toggleClass('down')
            } else {
                $('.shopClassify_nav .aui-tab-item').eq(3).addClass('up')
            }
          }
          prevIndex = ret.index
      });
  }

  function close_win(){
    api.closeWin({});
  }

  function goDetail(){
    api.openWin({
        name: 'classDetailHeader',
        url: './class_detail_header.html',
        pageParam: {
            test:''
        }
    });
  }


  function openFilter() {
        api.openFrame({
            name: 'classClassifyFilter',
            url: './class_classify_filter.html',
            pageParam:{

            }
        })
    }

  //店铺首页banner
  function bannerSwiper(){
    var bannerSwiper = new Swiper('#swiper_banner', {
        autoplay: 3000,
        loop: true,
        pagination: '.pagination_banner',
    })
  }

</script>
